<template>
	<view>
		<!-- 积分信息 -->
		<view class="integral_info" @click="tosrore()">
			<view class="navbar">
				<view class="navbar-fixed">
					<!-- 状态栏小程序撑起高度 -->
					<view :style="{ height: statusBarHeight + 'px' }"></view>
					<view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }">
						<image src="../../static/jt6.png" @click.stop="back()"></image>
						<view class="navbar-search">我的积分</view>
					</view>
				</view>
				<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
				<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
			</view>
			<view class="top">
				<view class="title">积分余额</view>
				<view class="integral_num">{{ score }}</view>
			</view>
			<!-- <view class="gun"></view> -->
			<view class="down">
				<view class="down_item">
					<text>已获得</text>
					<text>{{ totalReceive }}</text>
				</view>
				<view class="down_item">
					<text>已使用</text>
					<text>{{ totalPay }}</text>
				</view>
			</view>
		</view>

		<!-- 对换记录&积分规则 -->
		<!-- <view class="record_rule">
			<view class="record_rule_item" v-for="item in recordRuleList" :key="item.text" @click="navigator(item)">
				<image :src="item.image"></image>
				<text>{{ item.text }}</text>
			</view>

		</view> -->

		<!-- 积分明细 -->
		<view class="integral_detail">
			<view class="title">
				<text>积分明细</text>
			</view>
			<view v-for="(item, index) in list" :key="`block-${index}`" v-if="kong == true">
				<view class="title2">
					<view class="tiem">
						<view class="tiem_item">
							<text class="tiem1">{{ item.time.split("-")[1] }}</text>
							<text class="tiem2">月 {{ item.time.split("-")[0] }}年</text>
						</view>
						<!-- <image src="@/static/image/top.png"></image> -->
						<!-- <image src="@/static/image/down.png"></image> -->
					</view>
					<view>
						<text>支出：{{ getPay(item.list) }}积分</text>
						<text style="margin-left: 20rpx">收入：{{ getReceive(item.list) }}积分</text>
					</view>
				</view>
				<view class="integral_detail_content">
					<view class="content" v-for="(sitem, index) in item.list" :key="`item-${index}`">
						<view class="left">
							<view>{{ sitem.memo }}</view>
							<view>{{ getTime(sitem.createtime) }}</view>
						</view>
						<view class="right">{{ sitem.type == 2 ? "-" : "+" }} {{ sitem.score }}</view>
					</view>
				</view>
			</view>
			<kong v-if="kong == false"></kong>
		</view>
	</view>
</template>

<script>
import kong from "../../components/kong.vue"
export default {
	components: {
		kong,
	},
	data() {
		return {
			score: 0,
			list: [],
			resList: [],
			//对换记录&积分规则
			recordRuleList: [
				{
					image: "../../static/image/record1.png",
					text: "兑换记录",
					path: "/pages/exchangeRecord/exchangeRecord",
				},
				{
					image: "../../static/image/record2.png",
					text: "积分规则",
					path: "/pages/integralRule/integralRule",
				},
			],
			kong: null,
			statusBarHeight: 20,
			/* 状态栏高度 */
			navBarHeight: 45,
			/* 导航栏高度 */
			windowWidth: 375,
			/* 窗口宽度 */
			/* 设定状态栏默认高度 */
		}
	},
	computed: {
		totalReceive() {
			let total = 0
			this.resList.forEach((item) => {
				if (item.type == 1) {
					total += item.score
				}
			})
			return total
		},
		totalPay() {
			let total = 0
			this.resList.forEach((item) => {
				if (item.type == 2) {
					total += item.score
				}
			})
			return total
		},
	},
	onShow() {
		this.getnav()
	},
	onLoad() {
		this.getList()
	},
	methods: {
		getnav() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo)
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
		getReceive(list) {
			let total = 0
			list.forEach((item) => {
				if (item.type == 1) {
					total += item.score
				}
			})
			return total
		},
		getPay(list) {
			let total = 0
			list.forEach((item) => {
				if (item.type == 2) {
					total += item.score
				}
			})
			return total
		},
		// 对换记录&积分规则的跳转
		navigator(item) {
			uni.navigateTo({
				url: item.path,
			})
		},
		back() {
			uni.navigateBack({
				delta: 1,
			})
		},
		getTime: function (value) {
			var date = new Date(value * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear()
			var month = ("0" + (date.getMonth() + 1)).slice(-2)
			var sdate = ("0" + date.getDate()).slice(-2)
			var hour = ("0" + date.getHours()).slice(-2)
			var minute = ("0" + date.getMinutes()).slice(-2)
			var second = ("0" + date.getSeconds()).slice(-2)
			// 拼接
			var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
			// 返回
			return result
		},
		async getList() {
			try {
				let res = await this.$http({
					url: "/api/wechat/userScore",
				})
				// res.data.list按年月份分组
				let list = res.data.list
				let obj = {}
				list.forEach((item) => {
					let date = new Date(item.createtime * 1000)
					let year = date.getFullYear()
					let month = date.getMonth() + 1
					let key = `${year}-${month}`
					if (obj[key]) {
						obj[key].push(item)
					} else {
						obj[key] = [item]
					}
				})
				let arr = []
				for (let key in obj) {
					arr.push({
						time: key,
						list: obj[key],
					})
				}
				this.list = arr
				if (this.list.length == 0) {
					this.kong = false
				} else {
					this.kong = true
				}
				this.resList = res.data.list
				this.score = res.data.score
			} catch {}
		},
		tosrore() {
			uni.navigateTo({
				url: "/pageshop/recharge/recharge",
			})
		},
	},
}
</script>

<style lang="scss" scoped>
// 积分信息
.integral_info {
	width: 750rpx;
	height: 562rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #ffffff;
	background-image: url($uni-url + "/bg5.png");
	background-size: 100% 100%;
	margin: 0 auto;
	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			// height: 102rpx;
			// padding-bottom: 20rpx;
			background: transparent;

			.navbar-content {
				display: flex;
				// justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				// height: 142rpx;
				box-sizing: border-box;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}

				.navbar-search {
					display: flex;
					align-items: center;
					// padding: 0 10px;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222;
					position: absolute;
					left: 50%;
					transform: translate(-50%, 0);
				}
			}
		}
	}
	.top {
		height: 216rpx;
		width: 100%;
		color: #222222;

		.title {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			text-align: center;
			line-height: 1em;
			margin-top: 40rpx;
		}

		.integral_num {
			font-size: 56rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			text-align: center;
			line-height: 1em;
			margin-top: 34rpx;
		}
	}

	.down {
		height: 182rpx;
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		padding-top: 40rpx;
		box-sizing: border-box;
		color: #222;

		.down_item {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			text:first-child {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222;
				line-height: 1em;
			}

			text:last-child {
				font-size: 40rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222;
				margin-top: 34rpx;
				line-height: 1em;
			}
		}
	}
}

// 对换记录&积分规则
.record_rule {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20rpx 30rpx 0 30rpx;

	.record_rule_item {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 26rpx;
		width: 334rpx;
		height: 110rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		image {
			width: 54rpx;
			height: 54rpx;
		}

		text {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
		}
	}
}

// 积分明细
.integral_detail {
	width: 690rpx;
	margin: 48rpx auto 0 auto;
	padding-bottom: 20rpx;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		text:first-child {
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
		}

		text:last-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}
	}

	.title2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		margin-top: 28rpx;

		view:last-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}

		.tiem {
			display: flex;
			justify-content: center;
			align-items: center;

			.tiem_item {
				display: flex;
				align-items: flex-end;

				.tiem1 {
					font-size: 32rpx;
					line-height: 1em;
				}

				.tiem2 {
					font-size: 26rpx;
					line-height: 1em;
				}
			}

			image {
				width: 18rpx;
				height: 14rpx;
				margin-left: 14rpx;
			}
		}
	}

	.integral_detail_content {
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 28rpx;

		.content:last-child {
			border: none;
		}

		.content {
			margin: 0 24rpx;
			padding: 40rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #ececec;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				:first-child {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 1em;
					margin-bottom: 24rpx;
				}

				:last-child {
					font-size: 26rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
				}
			}

			.right {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}
		}
	}
}
</style>
